<template>
  <div class="info">
    <div class="infoContainer">
      <!-- 表单头部 -->
      <div class="top">
        <a href="/api/expo/exhibitor/export?id=1">
        <el-button type="primary" @click="click()">导出EXCEL</el-button>
        </a>
      </div>
      <!-- 表单区域 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{background:background}"
      >
        <el-table-column prop="userName" label="姓名" width="90" height="50px"></el-table-column>
        <el-table-column prop="enterprise" label="单位" width="90"></el-table-column>
        <el-table-column prop="position" label="职务" width="90"></el-table-column>
        <el-table-column prop="industryInvolved" label="行业" width="90"></el-table-column>
        <el-table-column prop="count" label="浏览(次数)" width="90"></el-table-column>
        <el-table-column prop="collect" label="收藏" width="110"></el-table-column>
        <el-table-column prop="offline" label="加入线下观展计划" width="110"></el-table-column>
        <el-table-column prop="talk" label="预约线下洽谈" width="110"></el-table-column>
        <el-table-column prop="exchange" label="预约技术交流讲座" width="110"></el-table-column>
        <el-table-column prop="Online" label="预约线上会议" width="110"></el-table-column>
        <el-table-column prop="live" label="预约线上直播" width="110"></el-table-column>
      </el-table>
      <!-- 分页器 -->
       <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="30"
      ></el-pagination>
    </div>
  </div>
</template>
 
<script>
import { audience,expo } from "../../request/home";
 
export default {
  name: "Management",
  data() {
    return {
      background: "#F1F1F1",
      tableData: [
      ],
      pagesize:10,
      total:0,
    };
  },
  mounted() {
    this.save();
    this.click()
  },
  methods: {
    save() {
      audience({ pageNum: 1, pageSize: 10 }).then((res) => {
        console.log(res);
        this.tableData = res.data.data.list;
      });
    },
    handleCurrentChange(val) {
      console.log(val);
      audience({ pageNum: val, pageSize: this.pagesize }).then((res) => {
        this.total = res.data.data.total;
        this.tableData = res.data.data.list;
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    click(){
      // expo().then(res=>{
          
      // })
      // window.location.href=""
    }
  },
};
</script>
 
<style scoped lang="less">
body {
  background: #f1f1f1;
}
.info {
  .infoContainer {
    overflow: scroll;
    margin-top: 30px;
    // width: 1579px;
    width: calc(100vm - 280px);
    min-width: 1024px;
    height: 769px;
    margin-left: 31px;
    background: #ffffff;
    
    
    .top {
      width: 100%;
      height: 71px;
      // background: violet;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 10px;
      a{
        margin-top: -50px;
      }
    }
    
    
  }
}
.el-button--primary {
  background: #004cb3;
  width: 110px;
  height: 40px;
  border-radius: 5px;
  margin-left: 20px;
}
/deep/.el-button {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  span {
    color: rgba(255, 255, 255, 1);
  }
}
/deep/.el-table .cell {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  height: 20px;
  text-align: center;
}
/deep/.el-table_1_column_2 {
  .cell {
    width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 5px;
  }
}
/deep/.el-table_1_column_5 {
  .cell {
    width: 90px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 5px;
  }
}
/deep/.el-table_1_column_6 {
  .cell {
    width: 90px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 5px;
  }
}
/deep/.el-table_1_column_7 {
  .cell {
    width: 90px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 5px;
  }
}
/deep/.el-table_1_column_8 {
  .cell {
    width: 90px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 5px;
  }
}
/deep/.el-table thead {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
/deep/table.el-table__header {
  .cell {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
  }
}
.iconfont {
  color: #f47c00;
  font-size: 30px;
}
.el-pagination {
  margin-top: 40px;
}
/deep/ .el-table__header-wrapper {
  margin: 0 0.1rem;
  box-sizing: border-box;
}
/deep/ .el-table__body,
.el-table__footer,
.el-table__header {
  margin: 0 0.1rem;
  box-sizing: border-box;
}
/deep/ .el-table {
  ::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }
}
</style>
